<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="keyword" content="ONE,GO物,网上购物,交易市场,网上交易">
    <meta name="description" content="ONE-GO物，平价线上交易平台，提供各类商品交易，让大家都可以享受购物的乐趣和真正品质购物">
    <title>ONE - GO物</title>
    <link rel="shortcut icon" href="/static/images/logo_i.png">
    <!--引入layui css样式-->
    <link rel="stylesheet" href="/static/layui-v2.6.7/layui/css/layui.css">
    <!--引入layui js脚本-->
    <script src="/static/layui-v2.6.7/layui/layui.js"></script>
    <script src="/static/js/user.js"></script>
    <link rel="stylesheet" href="/static/css/index.css">
</head>
<body>
<!--头部 start-->
<div class="header">
    <div class="layui-header layui-bg-red">
        <div class="layui-container header-content">
            <!--logo start-->
            <a class="layui-logo logo-box" href="/static/index.html">
                <img src="/static/images/logo_w.png" alt="ONE-GO物" class="logo">
                <h2>ONE-GO物</h2>
            </a>
            <!--logo end-->

            <!--search start-->
            <div class="search">
                <div class="search-box">
                    <input type="search" class="search-input" placeholder="请输入你要搜索的宝贝" required autocomplete="off"
                           name="q">
                    <button class="search-btn">搜索</button>
                </div>
                <ul class="search-item"></ul>
            </div>
            <!--search end-->

            <!--用户信息 start-->
            <ul class="layui-nav user-box layui-bg-red" lay-bar="disabled">
                <li class="layui-nav-item">
                    <a href="" class="layui-icon layui-icon-cart">购物车<span class="layui-badge layui-bg-orange">9</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="">全部订单<span class="layui-badge-dot"></span></a>
                </li>
                <li class="layui-nav-item" id="user_info" lay-unselect="">
                    <a href="javascript:;"><img src="/static/images/logo_w.png" class="layui-nav-img"
                                                id="portrait_s"><span
                            id="nickname"></span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="/static/page/user/info.html">个人信息</a></dd>
                        <dd><a href="javascript:;">足迹</a></dd>
                        <hr>
                        <dd><a href="javascript:logout();">退出</a></dd>
                    </dl>
                </li>
            </ul>
            <!--用户信息 end-->
        </div>
    </div>
</div>
<!--头部 end-->

<!--主体 start-->
<div class="content">
    <div class="layui-container">
        <div class="promotion">
            <!--菜单 start-->
            <ul class="layui-menu" id="menu">

            </ul>
            <!--菜单 end-->

            <!--banner start-->
            <div class="layui-carousel" id="banner">
                <div carousel-item="" class="banner-images">
                    <div><img
                            src="https://img.alicdn.com/imgextra/i1/6000000003012/O1CN01l9SL3G1Y7Xd0npAoe_!!6000000003012-0-octopus.jpg">
                    </div>
                    <div><img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"></div>
                    <div><img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg"></div>
                    <div><img src="https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg"></div>
                </div>
            </div>
            <!--banner end-->
        </div>

        <div id="column">
        </div>
    </div>


</div>
<!--主体 end-->

<!--尾部 start-->
<div class="footer">
    <div class="layui-container">
        <p>2021 - 现在 yige@yige.com 版权所有</p>
    </div>
</div>
<!--尾部 end-->

<script>
    layui.use(['layer', 'form', 'carousel', 'jquery', 'element'], function () {
        var layer = layui.layer
            , form = layui.form
            , carousel = layui.carousel
            , $ = layui.$
            , element = layui.element;

        $.ajax({
            type: "GET",
            url: "/user/info/",
            headers: {
                'Authorization': localStorage.getItem('Authorization')
            },
            success: function (data) {
                let code = data.code
                if (code != 200) {
                    $('#user_info').html('<a href="/static/page/user/login.html">前往登陆</a>')
                } else {
                    let user = data.data
                    let nickname = data.data.email
                    if (user.detail) {
                        let detail = user.detail
                        if (detail.nickname) {
                            nickname = detail.nickname
                        }
                        if (detail.portrait) {
                            layui.$('#portrait_s').attr('src', detail.portrait);
                        }
                    }
                    $('#nickname').html(nickname)
                }
            }
        });

        carousel.render({
            elem: '#banner'
            , width: '890px'
            , height: 'auto'
            , interval: 5000
        });

        // 获取菜单数据
        $.get('/merchandise/category/all/', function (data) {
            let menus = data.data

            let menuData = `` // ``ES6的模板字符串
            for (let i = 0; i < menus.length; i += 3) {
                menuData += `
                    <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                    <div class="layui-menu-body-title">
                    <span class="layui-breadcrumb">
                `
                for (let x = i; x < i + 3; x++) {
                    if (x < menus.length) {
                        menuData += `<a href="/static/page/merchandise/category.html?id=` + menus[x].fields.id + `" target="_blank">${menus[x].fields.name}</a>`
                    }
                }
                menuData += `</span>
                        <i class="layui-icon layui-icon-right"></i>
                    </div>
                    <div class="layui-panel layui-menu-body-panel" style="width: 877px">`

                for (let y = i; y < i + 3; y++) {
                    if (y < menus.length) {
                        menuData += `<div class="layui-menu-body-title">
                            <h4>${menus[y].fields.name}</h4>
                            <span class="layui-breadcrumb">`
                        if (menus[y].son) {
                            $.each(menus[y].son, function (i, item) {
                                menuData += `<a href="/static/page/merchandise/category.html?id=` + item.id + `" target="_blank">${item.name}</a>`
                            })
                        }
                        menuData += `</span>
                        </div>`
                    }
                }
                menuData += `</div>
                </li>`

                $('#menu').html(menuData)
                element.render('breadcrumb')
            }
        })

        // 获取商品数据
        $.get('/merchandise/column/all/', function (data) {
            console.log(data)
            let content = ``
            $.each(data.data, function (i, column) {
                if (column.merchandise_list.length > 0) {
                    content += `<div class="public-praise">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>${column.name}<span class="layui-badge">推荐栏目</span></legend>
                </fieldset>
                <div class="layui-row">`

                    $.each(column.merchandise_list, function (i, merchandise) {
                        content += `<div class="layui-col-xs3">
                        <a target="_blank" href="/static/page/merchandise/item.html/?id=` + merchandise.id + `" class="layui-card">
                            <div class="layui-card-header">
                                <img src="${merchandise.cover_img}"
                                     alt="宝贝">
                            </div>
                            <div class="layui-card-body">
                                <h4>${merchandise.title}</h4>
                                <p>${merchandise.subtitle}</p>
                            </div>
                        </a>
                    </div>`
                    })
                    content += `</div>
            </div>`
                }
            })
            // console.log(content)
            $('#column').html(content)
        })

        // 搜索联想词
        $('.search-input').keyup(function () {
            if ($('.search-input').val()) {
                $.get("/merchandise/category/search/", {'q': $('.search-input').val()}, function (data) {
                    let category_list = data.data
                    if (category_list) {
                        let str = ``
                        $.each(category_list, function (i, category) {
                            str += `<li><a href="/static/page/merchandise/search.html?q=${category._source.name}" target="_blank">${category.highlight.name[0]}</a></li>`
                        })
                        $('.search-item').html(str)
                    }
                })
            } else {
                $('.search-item').html('')
            }
        })

        function search() {
            window.open(`/static/page/merchandise/search.html?q=${$('.search-input').val()}`, '_blank')
        }

        // 点击搜索
        $('.search-btn').click(search)

        // 回车搜索
        $('.search-input').keydown(function (event) {
            if (event.keyCode == 13) {
                search()
            }
        })
    });
</script>
</body>
</html>